// 需求1 点击a链接 显示隐藏
document.querySelector('.register a').onclick = function () {
  // 隐藏注册 显示登录
  document.querySelector('.register').style.display = 'none'
  document.querySelector('.login').style.display = 'block'

}
document.querySelector('.login a').onclick = function () {
  // 隐藏登录 显示注册
  document.querySelector('.login').style.display = 'none'
  document.querySelector('.register').style.display = 'block'
}


// 需求2 ： 输入内容校验是否符合校验规则
// input keyup 不能用keyup

let inp1 = document.querySelector('.login [name =  username]')

let inp2 = document.querySelector('.login [name =  password]')

let inp3 = document.querySelector('.register [name =username]')

let inp4 = document.querySelector('.register [name =password]')

// 调用
checkInp(inp1, '用户名', /^\S{2,15}$/, 2)
checkInp(inp2, '密码', /^\S{6,15}$/, 6)
checkInp(inp3, '用户名', /^\S{2,15}$/, 2)
checkInp(inp4, '密码', /^\S{6,15}$/, 6)

function checkInp(ele, txt, reg, n) {

  // 绑定事件
  ele.oninput = function () {
    // 非空校验
    if (this.value.trim() == '') {
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt + '用户名不能为空'
      return //真的出现空白 后面的代码不用执行了
    } else {
      this.nextElementSibling.style.display = 'none'
      this.nextElementSibling.innerHTML = ''
    }

    // 长度校验
    if (reg.test(this.value)) {
      // 通过校验就隐藏
      this.nextElementSibling.style.display = 'none'
      this.nextElementSibling.innerHTML = ''
    } else {
      // 没通过验证就显示
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt + `用户长度不能小于${n}位 或者超过15位`
    }
  }

}

// 需求3 注册功能
let form1 = document.querySelector('.register form')
form1.onsubmit = function (e) {
  // 阻止默认浏览器行为 将来发送ajax 提交
  e.preventDefault()

  axios({
    url: '/api/register',
    method: 'post',
    data: $(form1).serialize(),

  }).then(({ data: res }) => {
    //成功回调
    // console.log(res)
    // 判断业务状态码
    // if (res.code == 1) {
    //   return toastr.wrning(res.message)
    // }
    if (res.code == 0) {
      // 成功提示 清空表单 切换到登录
      toastr.success('恭喜您，注册用户成功')
      form1.reset()
      document.querySelector('.register a').click()

    }
  });


}

// 需求4 登录功能
let form2 = document.querySelector('.login form')
form2.onsubmit = function (e) {
  // 阻止默认提交
  e.preventDefault()
  //忽略非空校验
  // 直接发送ajax
  axios({
    url: '/api/login',
    method: 'POST',
    data: $(form2).serialize()
  }).then(({ data: res }) => {
    // 错误拦截器已经完成 所以值判断正确情况
    if (res.code == 0) {
      //成功提示 页面跳转 保存token
      toastr.success('恭喜你，登录成功')
      location.href = './index.html'
      localStorage.setItem('myToken', res.token)
    }
  });
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                